<template>
  <div class="template recommend-container">
    <div class="title">推荐</div>
    <div class="content">
      <panel-common />
      <div class="block">
        <div class="dt">内容</div>
        <div class="list">
          <ul class="grid-content-ul">
            <li class="content-li" v-for="(item, index) of list" :key="index" @click="editHandle(item, index)">
              <el-image :src="item.url" fit="contain">
                <div slot="error" class="image-slot">
                  <i class="el-icon-picture-outline" />
                </div>
              </el-image>
            </li>
          </ul>
        </div>
        <div class="tips">请使用<em>宽{{limitWidthAndHeight.width}}</em>-<em>高{{limitWidthAndHeight.height}}</em>内的<em>jpg</em>或<em>png</em>图片</div>
      </div>
      <!-- <div class="block">
        <div class="submit">
          <el-button type="primary" @click="onSelect">选择</el-button>
        </div>
      </div> -->
    </div>
    <select-goods v-model="showSelectGoodsFlag" :multiple="false" @select="selectedGoodsHandle" />
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { STORE_NAMESPACE, typeConstants } from '../../../../config/'
import SelectGoods from '../../../select-goods/'
import PanelCommon from '../common'
export default {
  name: 'PanelRecommend',
  components: {
    SelectGoods,
    PanelCommon
  },
  data () {
    return {
      showSelectGoodsFlag: false,
      editItem: null,
      editIndex: null
    }
  },
  computed: {
    ...mapState({
      current: state => state[STORE_NAMESPACE].current || {},
      currentIndex: state => state[STORE_NAMESPACE].currentIndex
    }),
    list () {
      return this.current.elements
    },
    type () {
      return this.current.type
    },
    limitWidthAndHeight () {
      const obj = {}
      switch (this.type) {
        case typeConstants.RECOMMEND_1:
          obj.width = '750像素'
          obj.height = '120~950像素'
          break
        case typeConstants.RECOMMEND_3:
          obj.width = '250像素'
          obj.height = '100~420像素'
          break
        case typeConstants.RECOMMEND_2:
          obj.width = '350像素'
          obj.height = '100~420像素'
          break
        default:
          break
      }
      return obj
    }
  },
  methods: {
    onSelect () {
      this.showSelectGoodsFlag = true
    },
    editHandle (item, index) {
      this.editItem = item
      this.editIndex = index
      this.showSelectGoodsFlag = true
    },
    selectedGoodsHandle (data = []) {
      if (data.length === 0) {
        this.setElement(data[0], this.editIndex)
      } else {
        // 批量
        data.forEach(item => {
          this.setElement(data[0], this.editIndex)
        })
      }
    },
    setElement (item, index) {
      const data = {
        name: item.name,
        url: item.icon,
        price: item.price,
        id: item.id // 注意这里是商品id
      }
      this.$store.dispatch(`${STORE_NAMESPACE}/setElement`, {
        type: 'update',
        index,
        value: {
          ...this.list[index],
          ...data
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.recommend-container {
  position: relative;
  z-index: 10;
  i {
    font-size: 15px;
    color: #909399;
  }
  .grid-content-ul {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, 80px) !important;
    grid-template-rows: 80px !important;
    margin: auto !important;
    grid-gap: 5px 5px !important;
  }
  .content-li {
    position: relative;
    background: #fbfbfb;
    border: 1px dashed #c0ccda;
    box-sizing: border-box;
    border-radius: 6px;
    .el-button {
      border: unset;
      width: 100%;
      height: 100%;
    }
  }
  .dd {
    display: flex;
    .el-image {
      width: 40px;
      height: 40px;
      line-height: 40px;
      overflow: unset;
      display: inherit;
      ::v-deep .el-image__error {
        display: none;
      }
    }
    ::v-deep .el-form-item__content {
      height: 40px;
      i {
        font-size: 15px;
        color: #909399;
      }
    }
  }
}
</style>